<template>
  <view>
    <!-- 顶部导航 -->
    <fa-navbar title="兑换记录" :border-bottom="false"></fa-navbar>
    <!--		<view class="">
          <u-dropdown :active-color="theme.bgColor">
            <u-dropdown-item v-model="type" title="订单类型" @change="change1" :options="options1"></u-dropdown-item>
            <u-dropdown-item v-model="status" title="订单状态" @change="change2" :options="options2"></u-dropdown-item>
          </u-dropdown>
        </view>-->
    <!--		<view class="list u-border-top">
          <view class="fa-list-item u-border-bottom" v-for="(item, index) in list" :key="index">
            <view class="fa-item-image"><image :src="item.exchange && item.exchange.image" mode="aspectFill"></image></view>
            <view class="u-line-3 u-font-30 u-m-b-15 u-m-t-15 text-weight">{{ item.exchange && item.exchange.title }}</view>
            <view class="u-flex u-row-between u-col-center">
              <view class="u-flex">
                <view class="u-m-r-10">
                  <u-tag
                    shape="circle"
                    :text="item.status_text"
                    :type="item.status == 'rejected' ? 'error' : item.status == 'created' || item.status == 'inprogress' ? 'warning ' : 'success'"
                  />
                </view>
                <view class="" v-if="item.status == 'rejected'">
                  <u-button shape="circle" size="mini" @click="looks(item)">
                    <u-icon name="info-circle"></u-icon>
                    <text class="u-m-l-5">拒绝原因</text>
                  </u-button>
                </view>
                <view class="" v-if="item.type == 'reality' && (item.status == 'delivered' || item.status == 'completed')">
                  <u-button shape="circle" size="mini" @click="looks(item)">
                    <u-icon name="info-circle"></u-icon>
                    <text class="u-m-l-5">快递信息</text>
                  </u-button>
                </view>
              </view>
              <view class="u-tips-color">兑换时间：{{ item.createtime | date('yyyy-mm-dd hh:MM') }}</view>
            </view>
          </view>
        </view>-->
    <view class="bg-white p-2 u-flex justify-between items-center list" v-for="(item, index) in list">
      <view class="flex items-center left">
        <image src="/static/image/logo.png"></image>
        <view class="left_content">
          <view class="flex items-center">
            <u-icon size="30rpx" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
            <text class="left_title">【健身】乐享健身工作室</text>
            <u-icon name="arrow-right" size="20rpx"></u-icon>
          </view>
          <view class="left_money">1 次｜实付 ¥188</view>
          <view class="left_time">下单时间 2024-10-22 12:00</view>
        </view>
      </view>
      <view class="right">
        +19积分
      </view>
    </view>
    <u-modal v-model="show" :title="title">
      <view class="slot-content u-p-30 u-tips-color">
        <rich-text :nodes="content"></rich-text>
      </view>
    </u-modal>
    <!-- 加载更多 -->
    <view class="u-p-t-30 u-p-b-30 u-border-top" v-if="list.length">
      <u-loadmore bg-color="#ffffff" :status="has_more ? status : 'nomore'"/>
    </view>
    <!-- 空数据 -->
    <view class="u-flex u-row-center fa-empty top-15" v-if="is_empty">
      <!--			<image src="../../static/image/order.png" mode=""></image>-->
      <view class="u-tips-color">您没有兑换记录哦~</view>
    </view>

    <!-- 回到顶部 -->
    <u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }"
                :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
    <!-- 底部导航 -->
    <fa-tabbar></fa-tabbar>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.getOrderList();
  },
  onShow() {
    if (this.isFirst && !this.vuex_token) {
      uni.$u.route({
        type: 'back'
      });
      return;
    }
    this.isFirst = true;
  },
  data() {
    return {
      isFirst: false,
      scrollTop: 0,
      list: [],
      status: 'loadmore',
      has_more: false,
      is_empty: false,
      is_update: false,
      page: 1,
      list: [],
      type: '',
      status: '',
      options1: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '实物',
          value: 'reality'
        },
        {
          label: '虚拟',
          value: 'virtual'
        }
      ],
      options2: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '待兑换',
          value: 'created'
        },
        {
          label: '处理中',
          value: 'inprogress'
        },
        {
          label: '已拒绝',
          value: 'rejected'
        },
        {
          label: '已发货',
          value: 'delivered'
        },
        {
          label: '已完成',
          value: 'completed'
        }
      ],
      show: false,
      title: '',
      content: ''
    };
  },
  methods: {
    change1(value) {
      this.type = value;
      this.is_update = true;
      this.getOrderList();
    },
    change2(value) {
      this.status = value;
      this.is_update = true;
      this.getOrderList();
    },
    looks(item) {
      this.show = true;
      if (item.status == 'rejected') {
        this.title = '拒绝原因';
        this.content = `<div style="text-align:center;">${item.reason || '未填写'}</div>`;
      } else {
        this.title = '快递信息';
        this.content = `
				<div>
					<div>快递名称：${item.expressname}</div>
					<div>快递单号：${item.expressno}</div>
				</div>`;
      }
    },
    getOrderList() {
      this.$api.myExchange({page: this.page, type: this.type, status: this.status}).then(res => {
        if (res.code == 1) {
          if (this.is_update) {
            this.is_update = false;
            this.list = [];
          }
          this.list = [...this.list, ...res.data.data];
          this.is_empty = !this.list.length;
          this.has_more = res.data.current_page < res.data.last_page;
        }
      });
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.has_more) {
      this.status = 'loading';
      this.page++;
      this.getOrderList();
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #F1F1F1;
}
</style>
<style lang="scss" scoped>
.list {
  border-radius: 10rpx;

  .left {
    image {
      width: 100rpx;
      height: 100rpx;
    }
    .left_content{
      margin-left: 43rpx;
      display: flex;
      flex-flow: column wrap;
      justify-content: center;
      .left_title{
        font-size: 24rpx;
        padding-right: 16rpx;
      }
      .left_money{
        font-size: 20rpx
      }
      .left_time{

        font-size: 18rpx;
        color: #999999 ;
      }
    }
  }

  .right {
    color: #999999;
    font-size: 18rpx;
  }
}

.title {
  color: #999999;
  font-size: 20rpx;
  margin: 14rpx 0;
}

.box {
  background: white;
  border-radius: 10rpx;
  padding: 15rpx 24rpx;

  .item {
    display: flex;
    image{
      width: 100rpx;
      height: 100rpx;
    }

    .info {
      .title {

      }
      .money{

      }
      .time{

      }
    }
  }
}
</style>
